@tailwind base;
@tailwind components;
@tailwind utilities;

/* Page chrome */


html,
body,
#root {
  height: 100%;
}

body {
  @apply bg-white text-gray-900 antialiased;
  /* Reserve vertical scrollbar space to prevent initial layout shift */
  overflow-y: scroll;
}

/* Prevent layout shift when scrollbars appear */
html {
  scrollbar-gutter: stable both-edges;
}

.container-narrow {
  /* widen container to reduce clipping of rich content */
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.card {
  @apply bg-white border border-gray-200 rounded-xl;
}

.badge {
  @apply inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700 transition;
}

.button-primary {
  @apply inline-flex items-center justify-center gap-2 rounded-md bg-gray-900 text-white px-4 py-2 text-sm font-semibold hover:opacity-95 active:opacity-90 transition;
}

.button-ghost {
  @apply inline-flex items-center justify-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 hover:bg-gray-50 transition;
}

.headline {
  @apply text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight leading-[1.1];
}

.subcopy {
  @apply text-base md:text-lg text-gray-600;
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.section {
  @apply py-24;
}

.divider {
  @apply border-t border-gray-200;
}

.eyebrow {
  @apply text-xs font-medium uppercase tracking-wider text-gray-500;
}

.hover-lift {
  @apply transition-transform transition-shadow duration-200 hover:-translate-y-0.5 hover:shadow-hover;
}

/* Brand logo style to match app */
/* Brand logo style to match app */
.logo-font-poiret {
  @apply font-display tracking-wide;
}

/* API reference specific helpers */
.api-topbar {
  @apply sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-gray-200;
}

.api-sidebar {
  @apply hidden md:block border-r border-gray-200;
}

.api-card {
  @apply bg-white border border-gray-200 rounded-xl p-4;
}

.api-section-title {
  @apply text-xs font-semibold text-gray-700 uppercase tracking-wide;
}

.kbd {
  @apply inline-block rounded border border-gray-300 bg-gray-50 px-1.5 py-0.5 text-[11px] font-medium text-gray-700;
}

.codeblock {
  @apply overflow-x-auto rounded-md border border-gray-200 bg-gray-50 text-gray-800 text-xs p-3;
}

.codeblock-wrap {
  white-space: pre-wrap;
  word-break: break-word;
}

.pill {
  @apply inline-flex items-center justify-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset;
}

.status-pill {
  @apply inline-flex items-center rounded-md bg-gray-100 text-gray-700 px-2 py-0.5 text-[11px] font-medium;
}

/* Docs + Changelog typography */
/* Docs + Changelog typography handled by @tailwindcss/typography */
.docs-prose {
  @apply prose prose-slate prose-lg max-w-none;
  @apply prose-headings:font-display prose-headings:font-semibold prose-headings:tracking-tight;
  @apply prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline;
}

.changelog-prose {
  @apply prose prose-slate prose-lg max-w-none;
  @apply prose-headings:font-display prose-headings:font-semibold;
  @apply prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline;
}